<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="16"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">实名认证</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>

		<view class="userAccountInfo" v-if="false">
			<u--form labelPosition="left">
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">账户类型</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.type==1?'个人':'企业'"
							class="inputStyle" />
					</view>
				</u-form-item>

				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">{{userAccount.type==1?"姓名":"企业名称"}}</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.memberName"
							class="inputStyle" />
					</view>
				</u-form-item>

				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">账户</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.subAcc" class="inputStyle" />
					</view>
				</u-form-item>

				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">邮箱</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.email" class="inputStyle" />
					</view>
				</u-form-item>

				<u-form-item :border-bottom="false" v-show="userAccount.phone">
					<view class="formInput">
						<view class="label">手机号</view>
						<input placeholder-class="placeholderStyle" :value="userAccount.phone" class="inputStyle" />
					</view>
				</u-form-item>

				<view v-if="userAccount.type == 0">
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">法人姓名</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.businessName"
								class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">企业联系人</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.contact"
								class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">联系地址</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.contactAddr"
								class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">企业联系电话号码</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.contactPhone"
								class="inputStyle" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">社会统一信用代码</view>
							<input placeholder-class="placeholderStyle" :value="userAccount.papersCode"
								class="inputStyle" />
						</view>
					</u-form-item>
				</view>
			</u--form>
		</view>

		<view class="openBox" v-if="isRealName">
			<view class="form">
				<u--form labelPosition="left" ref="form">
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">手机号</view>
							<input placeholder-class="placeholderStyle" placeholder="请输入手机号" v-model="form.phone"
								class="inputStyle" maxlength="11" type="number" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">姓名</view>
							<input placeholder-class="placeholderStyle" placeholder="请输入姓名" v-model="form.username"
								class="inputStyle" type="text" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">证件号码</view>
							<input placeholder-class="placeholderStyle" placeholder="请输入证件号码" v-model="form.certNo"
								class="inputStyle" />
						</view>
					</u-form-item>
					<view class="zcxy">
						<view class="check-box">
							<u-checkbox-group size="14px" @change="checkChange">
								<u-checkbox :checked="checked" inactiveColor="#000000" labelColor="#000000"
									labelSize="12px" size="14px" activeColor="#C09B3A" shape="circle" label="已阅读并同意">
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="check-text">
							<text class="text_2" @tap.stop="agreement('zhucexieyikey')">《用户协议》</text>
							<text class="text_1">和</text>
							<text class="text_2" @tap.stop="agreement('yinsixieyikey')">《隐私政策》</text>
						</view>
					</view>
				</u--form>
			</view>
			<view class="submit-bottom">
				<!-- @tap="open" -->
				<view class="submit-btn" @tap="authentication">提交认证</view>
			</view>
		</view>
		<view class="openBox" v-else>
			<view class="form">
				<u--form labelPosition="left" ref="form">
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">手机号</view>
							<input placeholder-class="placeholderStyle" disabled placeholder="请输入手机号" v-model="form.phone"
								class="inputStyle" maxlength="11" type="number" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">姓名</view>
							<input placeholder-class="placeholderStyle" disabled placeholder="请输入姓名" v-model="form.username"
								class="inputStyle" type="text" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="formInput">
							<view class="label">证件号码</view>
							<input placeholder-class="placeholderStyle" disabled placeholder="请输入证件号码" v-model="form.certNo"
								class="inputStyle" />
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		getAccountData,
		initFaceVerify,
		setRealName,
		getUser
	} from '../../api/user.js'
	import {
		mapState
	} from 'vuex';
	import axios from 'axios'
	import {
		isIdCard,
		validateEmail,
		isCellPhone
	} from '@/common/proof-technique.js';
	export default {
		data() {
			return {
				form: {
					email: "",
					memberName: "",
					papersCode: "",
					type: 1,
					phone: "",
					username: "", //法人姓名
					contact: "",
					contactAddr: "",
					contactPhone: "",

					certNo: "", //法人身份证
				},
				userAccount: {},
				show: true,
				checked: false,
				isRealName:true
			}
		},
		onLoad(opt) {
			getUser().then(res => {
				this.form.phone = res.data.user.mobile;
				if(res.data.user.isRealName == 1){
					this.isRealName = false;
					this.form.username = res.data.user.username;
					this.form.certNo = res.data.user.idcardNo;
				}
			})
			var script = document.createElement('script');
			script.id = "authentication";
			script.src = "https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js";
			document.head.appendChild(script);
			if (opt) {
				this.form.type = opt.type;
			}
		},
		onShow() {
			// this.getAccount();
			
		},
		methods: {
			checkChange() {
				this.checked = !this.checked;
			},
			// 用户协议和隐私政策
			agreement(type) {
				uni.navigateTo({
					url: '/pages/login/agreement?type=' + type
				});
			},
			// 立即认证按钮
			async authentication() {
				try {
					if (!this.form.phone) throw '请输入手机号码'
					if (!this.form.username) throw '请输入真实姓名'
					if (!this.form.certNo) throw '请输入身份证号码'
					let _IDRe18 =
						/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
					let _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
					if (!_IDRe18.test(this.form.certNo) && !_IDre15.test(this.form.certNo)) throw '身份证号格式不正确'
					if (!this.checked) throw '勾选用户协议'
				} catch (e) {
					this.$u.toast(e);
					return
				}
				this.$refs.min_loading.open('认证中...');
				this.form.certNo=this.form.certNo.replace('x','X');
				console.log(this.form.certNo);
				let res = await setRealName({
					IDCardNo: this.form.certNo,
					username: this.form.username,
				})
				if (res.data.success) {
					uni.switchTab({
						url:'/pages/user/user'
					})
				} else {
					this.$u.toast(res.data.msg);
					this.$refs.min_loading.close();
				}
			},
			getAccount() {
				this.$nextTick(() => {
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getAccountData({}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						data.subAcc = (data.subAcc).substring(0, 5) + "******" + (data.subAcc).substring(13, 17);
						if (data.phone) {
							data.phone = (data.phone).substring(0, 3) + "******" + (data.phone).substring(7, 11);
						}
						if (data.contactPhone) {
							data.contactPhone = (data.contactPhone).substring(0, 3) + "******" + (data
								.contactPhone).substring(7, 11);
						}
						this.userAccount = data;
						this.show = true;
					} else {
						this.show = false;
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			open() {
				let obj = this.form,
					urls = location.origin + "/openAccount/submitSucces",
					codeUid = new Date().getTime(),
					token = uni.getStorageSync('newToken').token,
					metaInfo = getMetaInfo();

				if (this.rulesData()) {
					this.$refs.min_loading.open('请稍后！');
					initFaceVerify({
						...obj,
						sucesUrl: urls,
						memberName: obj.type == 1 ? obj.memberName : obj.businessName,
						metaInfo: JSON.stringify(metaInfo),
						papersCode: obj.type == 1 ? obj.papersCode : obj.certNo
					}).then(res => {
						if (res.data.success) {
							try {
								uni.setStorageSync('openAccountObj', {
									...obj,
									certifyId: res.data.obj.CertifyId,
									requestId: res.data.obj.requestId
								});
							} catch (e) {
								// error
							}
							location.href = res.data.obj.CertifyUrl;
						} else {
							this.$u.toast(res.data.msg);
						}
					}).finally(() => {
						this.$refs.min_loading.close();
					});
				}
			},
			rulesData() {
				let obj = this.form;
				const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/,
					idcardReg =
					/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
					regName =
					/^[\u00B7\u3007\u3400-\u9FFF\uE000-\uF8FF\uF900-\uFAFF\u{20000}-\u{2FFFF}\u{30000}-\u{3FFFF}]+$/u,
					regemail =
					/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
				if (this.form.type == 1) { //个人
					if (obj.memberName == "" || (!regName.test(obj.memberName))) {
						this.$u.toast('请输入真实姓名！');
						return false;
					} else if (obj.papersCode == "" || (!idcardReg.test(obj.papersCode))) {
						this.$u.toast('请输入正确的证件号码！');
						return false;
					} else if (obj.phone == '' || obj.phone == undefined || obj.phone == null) {
						this.$u.toast('请输入手机号！');
						return false;
					} else if ((!regPhone.test(obj.phone)) && obj.phone != '') {
						this.$u.toast('请输入正确的手机号！');
						return false;
					} else if (obj.email == '' || obj.email == undefined || obj.email == null || ((!regemail.test(obj
							.email)) && obj.email != '')) {
						this.$u.toast('请输入正确的邮箱！');
						return false;
					} else {
						return true;
					}
				} else {
					if (obj.memberName == "") {
						this.$u.toast('请输入企业名称！');
						return false;
					} else if (obj.papersCode == "") {
						this.$u.toast('请输入社会统一信用代码！');
						return false;
					} else if (obj.phone == '' || obj.phone == undefined || obj.phone == null) {
						this.$u.toast('请输入手机号！');
						return false;
					} else if ((!regPhone.test(obj.phone)) && obj.phone != '') {
						this.$u.toast('请输入正确的手机号！');
						return false;
					} else if (obj.email == '' || obj.email == undefined || obj.email == null || ((!regemail.test(obj
							.email)) && obj.email != '')) {
						this.$u.toast('请输入正确的邮箱！');
						return false;
					} else if (obj.businessName == "" || (!regName.test(obj.businessName))) {
						this.$u.toast('请输入正确的法人姓名！');
						return false;
					} else if (obj.certNo == "" || (!idcardReg.test(obj.certNo))) {
						this.$u.toast('请输入正确的法人证件号码！');
						return false;
					} else if (obj.contact == "" || (!regName.test(obj.contact))) {
						this.$u.toast('请输入正确的企业联系人姓名！');
						return false;
					} else if (obj.contactAddr == "") {
						this.$u.toast('请输入联系地址！');
						return false;
					} else if (obj.contactPhone == "" || (!regPhone.test(obj.phone))) {
						this.$u.toast('请输入正确的企业手机号！');
						return false;
					} else {
						return true;
					}
				}
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
		},
		computed: {
			...mapState(["hasLogin"]),
			userData() {
				let data = {};
				if (this.$store.state.hasLogin && this.$store.state.uerInfo) {
					data = this.$store.state.uerInfo;
				}
				return data;
			},
		},

	}
</script>

<style lang="scss" scoped>
	.con-box {
		min-height: 100vh;
		padding: 160upx 0upx 260upx;
		background-color: #fff;

		.openBox,
		.userAccountInfo {
			padding: 0 30upx;
		}

		.zcxy {
			display: flex;
			width: 100%;
			height: 32upx;
			align-items: center;
			justify-items: center;
			margin-top: 200upx;

			.check-text {
				font-size: 24upx;
				color: #000000;

				.text_2 {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					text-align: center;
					color: #C09B3A;
				}


			}
		}

		.formInput {
			width: 100%;
			border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
			padding-bottom: 10upx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			// justify-content: space-between;
			.label {
				width: 100%;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 20upx;
			}

			.inputStyle {
				color: #333;
			}

			input {
				flex: 1%;
				font-size: 24upx;
				color: #333;
			}
		}

		.imgCodeBox {
			.label {
				margin: 0;
				width: 180upx;
			}

			.imgCode {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 200upx;
					height: 60upx;
				}

				input {
					flex: 1%;
				}
			}
		}

		.codeBox {
			.label {
				width: 180upx;
			}

			.send-con {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding-right: 20upx;

				.send {
					color: #AEAEAE;
				}
			}
		}

		.submit-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 20upx 0;
			background-color: #fff;

			.submit-btn {
				width: 100%;
				height: 80upx;
				background: #CEA539;
				border-radius: 10upx;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}

		.placeholderStyle {
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #AEAEAE;
			line-height: 40upx;
		}
	}
</style>
